<template>
  <div class="bigBox">
    <div class="shenyin">
      <span class="suona"><img src="../assets/suona.svg" class="aac" /></span>
      <van-slider v-model="value" active-color="pink" bar-height="2px">
        <template #button>
          <div class="custom-button"></div>
        </template>
      </van-slider>
    </div>
    <div @click="$emit('toggle-show-lyric')" class="show-lyric">
      <div class="lyricMove" :style="{ marginTop: lyricMove }">
        <ul
          v-if="lyric"
          @touchstart="touchstart"
          @touchmove="touchmove"
          @touchend="touchend"
        >
          <li
            v-for="(item, index) in lyric"
            :key="index"
            items="item"
            :style="{
              'font-size': index == currentRow ? '1rem' : '.7rem',
              color: index == currentRow ? 'white' : '#aeaeae',
            }"
          >
            <div class="now">{{ item.text }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  props: ["currentMusic", "lyric", "currentTime"],
  data() {
    return {
      currentRow: 0,
      lyricMove: 0,
      value: 50,
      scorllY: 0,
    };
  },
  methods: {
    onChange(value) {
      Toast("当前值：" + value);
    },
     touchstart: function (e) {
      // console.log('touchstart',e.touches[0].clientY);
      this.touching = true;
      this.y = e.touches[0].clientY;
    },
    touchmove: function (e) {
      // console.log('touchmove',e.touches[0].clientY);
      // console.log(Math.floor((this.y - e.touches[0].clientY) / 30));
      this.scorllY = Math.floor((this.y - e.touches[0].clientY) / 30);
    },
    touchend: function () {
      this.touching = false;
      // console.log(this.lyric[this.currentRow].time, "-----" + this.currentTime);
      if (
        this.currentRow + this.scorllY >= 0 &&
        this.currentRow + this.scorllY <= this.lyric.length - 1
      ) {
        this.$emit(
          "update:currentTime",
          this.lyric[this.currentRow + this.scorllY].time + 0.5
        );
      }
    },
  },
  created() {},
  watch: {
    currentTime: function () {
      this.lyric.forEach((element, index) => {
        if (this.currentTime > element.time) {
          this.lyricMove = -index * 30 + 200 + "px";
          this.currentRow = index; //通过比较我们歌词属性里的时间与当前播放时间，来定位到该歌词
        }
      });
    },
  },
  // 接口地址 : /lyric
};
</script>

<style lang="css" >
.bigBox {
  position: relative;
  width: 100vw;
  top: 0;
  left: 0;
}
.shenyin {
  width: 80%;
  position: absolute;
  top: 100px;
  left: 50px;
}
.show-lyric {
  position: absolute;
  z-index: 14;
  width: 100%;
  height: 70vh;
  margin-top: 120px;
  overflow: scroll;
}
.lyricMove {
  color: #cccccc;
  text-align: center;
  line-height: 30px;
  margin-top: 200px;
}
.custom-button {
  width: 10px;
  height: 10px;
  background-color: white;
  border-radius: 50%;
}
.aac {
  width: 25px;
  height: 25px;
  position: absolute;
  top: -10px;
  left: -30px;
  z-index: 20;
}
</style>>
